<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文件上传<input type="file" id="file-list" multiple="multiple">
</body>
<script>
    // 1.补充知识：
    //  a.MIME:  MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。说白了就是文件的媒体类型。浏览器可以根据它来区分文件，然后决定什么内容用什么形式来显示。
    const fileList = document.getElementById('file-list');
    //监听文件的上传
    fileList.addEventListener('change',(event)=>{
        let files = event.target.files;//获取 上传标签的 files集合
        for(let i = 0; i<files.length; i++){
        console.log('获取上传文件的名称:'+files[i].name);
        console.log('获取上传文件的字节大小:'+files[i].size);
        console.log('获取上传文件的MIME类型信息:'+files[i].type);
        }
    })
    // 获取上传文件的名称:微信图片_202203082232388.jpg
    // 获取上传文件的字节大小:7522943
    // 获取上传文件的MIME类型信息:image/jpeg
</script>
</html>